import React, { Component } from 'react'
import { connect } from 'react-redux'
// import echarts from 'echarts'
// import ReactEcharts from "echarts-for-react"
// import gexf from "./les-miserables.gexf"
// import dataTool from "echarts/extension/dataTool"
var echarts = require('echarts/lib/echarts')
echarts.dataTool = require("echarts/extension/dataTool")
import axios from "axios"

@connect((state, props) => ({
    config: state.config,
}))
export default class Pie extends Component {
    constructor(props) {
        super(props)
        this.state = {
            data: [{
                name: 'Apples',
                value: 70
            }, {
                name: 'Strawberries',
                value: 68
            }, {
                name: 'Bananas',
                value: 48
            }, {
                name: 'Oranges',
                value: 40
            }, {
                name: 'Pears',
                value: 32
            }, {
                name: 'Pineapples',
                value: 27
            }, {
                name: 'Grapes',
                value: 18
            }],
        }
    }

    componentDidMount() {
        // this.loadChart()
        setTimeout(() => {
            this.loadChart()
        }, 500)
    }

    loadChart() {
        // console.log(this.chart)
        this.chartObj = echarts.init(this.chart)
        axios.get("../static/les-miserables.gexf").then(data => {
            var graph = echarts.dataTool.gexf.parse(data.data);
            var categories = [];
            for (var i = 0; i < 9; i++) {
                categories[i] = {
                    name: '类目' + i
                };
            }
            graph.nodes.forEach(function (node) {
                node.itemStyle = null;
                node.value = node.symbolSize;
                node.symbolSize /= 1.5;
                node.label = {
                    show: node.symbolSize > 30
                };
                node.category = node.attributes.modularity_class;
            });
            const option = {
                title: {
                    text: 'Les Miserables',
                    subtext: 'Default layout',
                    top: 'bottom',
                    left: 'right'
                },
                tooltip: {},
                legend: [{
                    // selectedMode: 'single',
                    data: categories.map(function (a) {
                        return a.name;
                    })
                }],
                animationDuration: 1500,
                animationEasingUpdate: 'quinticInOut',
                series : [
                    {
                        name: 'Les Miserables',
                        type: 'graph',
                        layout: 'none',
                        data: graph.nodes,
                        links: graph.links,
                        categories: categories,
                        roam: true,
                        focusNodeAdjacency: true,
                        itemStyle: {
                            borderColor: '#fff',
                            borderWidth: 1,
                            shadowBlur: 10,
                            shadowColor: 'rgba(0, 0, 0, 0.3)'
                        },
                        label: {
                            position: 'right',
                            formatter: '{b}'
                        },
                        lineStyle: {
                            color: 'source',
                            curveness: 0.3
                        },
                        emphasis: {
                            lineStyle: {
                                width: 10
                            }
                        }
                    }
                ]
            };

            this.chartObj.setOption(option);
        })
    }

    render() {
        return (
            <div className="page">
                <div className="page" ref={c => this.chart = c} />
            </div>
        )
    }
}
